import { useState, useEffect, useRef } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import Copy from '$tp/copy'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $http, $fn, $, $config } = window
/* -------------------------------------------------------- Async Component -- */
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
import { uploadCsv, uploadExcel } from '#cpt/upload-data'
import BackupMysqlTable from './_config/backup-mysql-table'
import BackupMysqlDatabase from './_config/backup-mysql-database'
import ImportMysqlSQL from './_config/import-mysql-sql'
import ShowColum from './_config/show-column'
import ModTableName from './_config/mod-table-name'
import ModTableComment from './_config/mod-table-comment'
import showTable from './structure/_config/show-table'
const className = 'nosel cp abs_full fxm pl5'
/* -------------------------------------------------------- Page Component -- */
const isNative = $config.isNative
const Index = () => {
	const tableRef = useRef()
	const navigate = useNavigate( )
	const d = $fn.query('d')
	const [info, setInfo] = useState({ title:'', database:d })
	useEffect(()=>{
		if( !d ) $http.pull(null, 'project/info', { loading:true }).then( d => setInfo(d) )
	},[ d ])
	const config = {
		page : {
			title: '表管理 - ' + `${ d ? '' : info.title + ' - ' }` + info.database ?? '',
			minWidth:null,
			controls: {
				data: [
					!isNative ? null : { label:'备份表 SQL', mode:'formModal', isKeys:1, config:({ keys }) => BackupMysqlTable({ table_name:keys, backup:info.backup, database:info.database } )},
					!isNative ? null : { label:'备份数据库 SQL', mode:'formModal', config:BackupMysqlDatabase({ backup:info.backup, database:info.database } )},
					!isNative ? null : { label:'导入 SQL', mode:'formModal', config:ImportMysqlSQL({ database:info.database } )},
					// { label:'查看表结构', mode:'tableModal', isKeys:1, abs:0, ghost:1, config:v => ShowColum({ ...v, database:info.database })},
					// { label:'查看表结构', mode:'tableModal', isKeys:1, abs:0, ghost:1, config:v => TableStructure({ ...v, database:info.database })}
					// { label:'修改表结构', isKeys:1, ghost:1, click: ({ keys }) => {
					// 	let t = keys?.[0]
					// 	if(keys.length > 1) t = keys[keys.length - 1]
					// 	if(t) $.pushNext(navigate, '/structure', { t , d: info.database })
					// }},
					{ mode:'refresh' },
					d ? { mode:'back' } : null,
				]
			}
		},
		search : {
			param: { database: info.database },
			data:[
				{ label:'表名称', 	name:'table_name' },
			]
		},
		// 表格配置
		table: {
			api 		: 'mysql/table_list',
			paging 		: 0,
			idStr 		: 'table_name',
			row 		: isNative ? {} : null,
			max 		: 500,
			cols		: [
				{ title: '表', 			dataIndex: 'table_name', width: 250, render: t => {
					return (
						<div className={className} onClick={e=>e.stopPropagation()}>
							<div className='ex' onClick={()=>{$.pushNext(navigate, '/structure', { t, d })}}><b className='ar f13'>{t}</b></div>
							<Copy t={t}/>
						</div>
					)
				}},
				{ title: '数据条数', 	dataIndex: 'table_rows', width: 60, render: t => t > 0 ?  <b className='ar c3'>{t}</b> : t },
				{ title: '空间碎片数', 	dataIndex: 'data_free', width: 70, render: t => t > 0 ?  <b className='ar c1'>{t}</b> : t },
				{ title: '自增起始点', 	dataIndex: 'auto_increment', 			width:70  },
				{ title: 'Size / MB', 	dataIndex: 'Size(MB)', width:70 },
				{ title: '表注释', 		dataIndex: 'table_comment', width:150, ellipsis:1, render: (t,r) => {
					return (
						<div className={className} onClick={e=>e.stopPropagation()}>
							<div className='ex omit' onClick={e=>{e.stopPropagation();ModTableComment({ table_name:r.table_name, database:info.database, old_name:t, tableRef })}}>
								{t}
							</div>
							<Copy t={t}/>
						</div>
					)
				} },
				{ title: '修改时间', 	dataIndex: 'create_time',  ...$fn.table.time  },
			],
			controls 	: {
				width: !isNative ? 200 : 480,
				data: ({ table_name }) => [
					{ label:'表数据', toNext: '/data', ghost:1, param: { t:table_name,  d:info.database }},
					{ label:'表信息', mode:'tableModal', ghost:1, config:showTable({ table_name, database:info.database})},
					{ label:'表结构', mode:'tableModal', config:ShowColum({ table_name, database:info.database })},
					!isNative ? null : { label: '备份数据', mode:'dropdown', data: [
						{ label:'SQL', mode:'formModal', autoClose:1, config:BackupMysqlTable({ table_name, database:info.database, backup:info.backup } )},
						{ label:'CSV', click:({ close })=>{
							$http.pull(null, 'mysql/backups_csv', { param:{ table_name, database:info.database }  }).then(()=>{
								$fn.msg.success("导出成功")
								close()
							})
						} },
						{ label:'EXCEL', click:({ close })=>{
							$http.pull(null, 'mysql/backups_excel', { param: { table_name, database:info.database }  }).then(()=>{
								$fn.msg.success("导出成功")
								close()
							})
						} },
					]},
					!isNative ? null : { label: '导入数据', mode:'dropdown', autoClose:1, data: [
						{ label:'CSV', click:()=>uploadCsv({ param:{ table_name, database:info.database }, title:table_name })},
						{ label:'EXCEL', click:() =>uploadExcel({ param:{ table_name, database:info.database  }, title:name })},
					]},
					{ label: '操作表', mode:'dropdown', data: [
						{ label:'id 排序', mode:'confirm', abs:0, api: 'mysql/sort_id', param: { database:info.database }},
						{ label:'清空表', mode:'confirm', abs:0, api: 'mysql/truncate_table', param: { table_name:[table_name], database:info.database }},
						{ label:'修改表名', mode:'formModal', autoClose:1, r:1, config: () => ModTableName({ database:info.database, table_name  })}
					]},
				]
			},
		}
	}
	return info.database ? (
		<>
			<SearchTable {...config} ref={tableRef}/>
			<Outlet />
		</>
	) : null
}
export default Index